<template>
  <div class="loginWarp">
    <div class="login flex-center">
      <el-form class="login-form">
        <h1 class="fw900 color-#000">欢迎使用</h1>
        <h3 class="mb15 fw900 color-#000">当前设备未授权或授权已过期</h3>
        <h3 class="mb15 fw900 color-#000">请通过下方按钮重新上传授权</h3>

        <el-form-item style="width: 100%" class="mt30">
          <el-button size="large" type="primary" style="width: 100%" @click="handleGet">
            <span>下载授权申请文件</span>
          </el-button>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-upload
class="upload-demo" style="width: 100%" :action="actionUrl" :limit="1" :show-file-list="false"
            :before-upload="beforeUpload" v-if="!loading">
            <el-button type="primary" size="large" style="width: 100%" :loading="loading">上传授权许可文件</el-button>
          </el-upload>
          <el-button type="primary" size="large" style="width: 100%" :loading="loading" v-else>上传中。。。</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { useRouter } from "vue-router";
import { ElMessage, UploadRawFile } from "element-plus";
import { getLicense, uploadLicense } from '@/api/license'
import { Awaitable } from "element-plus/es/utils/typescript";
const router = useRouter();
const loading = ref(false);
const actionUrl: string = import.meta.env.VITE_UPLOAD_URL
const handleGet = (): void => {
  const link = document.createElement("a");
  link.href = "/admin-api/gateway/export/reqx";
  link.download = ""
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

const beforeUpload = (rawFile: UploadRawFile): Awaitable<void | undefined | null | boolean | File | Blob> => {
  loading.value = true;
  const formData = new FormData();
  formData.append("file", rawFile);
  uploadLicense(formData).then(res => {
    console.log(`res -->`, res);
  })
  return false;
};
const handleSuccess = (response) => {
  loading.value = false;
  sessionStorage.setItem("REGISTER", 0);
  let { code } = response;
  if (code == 0) {
    router.push("/login");
  } else {
    ElMessage.error(response.msg);
  }
};
const handleError = (error) => {
  console.log(`error -->`, error);
  loading.value = false;
  ElMessage.error("上传失败");
};
</script>
<style lang="scss" scoped>
.loginWarp {
  height: 100%;
  background-image: url("../assets/imgs/bg.webp");
  background-size: cover;

  .login {
    height: 100%;
    width: 500px;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0px;
    top: 0px;
    background: #ffffffa8;
    backdrop-filter: blur(6px);
  }
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  width: 400px;

  :deep(.el-input) {
    height: 40px;
    background: rgba(0, 0, 0, 0);

    .el-input__wrapper,
    input {
      background: rgba(0, 0, 0, 0);
      height: 40px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

:deep(.el-upload--text) {
  width: 100%;
}
</style>
